<template>
  <div class="about">
    <Header ref="count" v-show="false" />
    <div class="content">
      <div class="list" ref="btns">
        <button @click="ksxz($event)">
          上机须知
        </button>
        <button
          class="colo"
          @click="examStart($event)"
          :disabled="examStartDisable"
        >
          {{ $store.state.examType == 1 ? "开始考试" : "开始培训" }}
        </button>
        <button @click="callTeacher($event)" :disabled="hjdisabled">
          呼叫老师
        </button>
      </div>
      <div class="list" ref="btns2">
        <button @click="apply($event)" :disabled="sqdisabled">
          上电申请
        </button>
        <button class="colo" @click="EndTest($event)" :disabled="disableEnd">
          {{ $store.state.examType == 1 ? "结束考试" : "结束培训" }}
        </button>
        <button class="colo" @click="ipinfo($event)" :disabled="disableEnd">
          开始拍照
        </button>
      </div>
    </div>
    <!-- 拍照组件 -->
    <photo @change-photo="changePhoto" v-if="isphoto"></photo>
    <!-- 弹窗 -->
    <alert :warndata="warndata" />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Photo from "@/components/Photo";
// import keybard from "@/components/keybard";
import Alert from "@/components/Alert.vue";
import Qs from "qs";
export default {
  name: "Train",
  components: { Header, Photo, Alert },
  data() {
    return {
      // isKeybard: false,
      isphoto: false,
      hjdisabled: false,
      sqdisabled: false,
      disableEnd: false,
      // pxVisible: false,
      // changepxVisible: false,
      // studentId: "",
      // startTime: "",
      // name: "",
      // verifyDisab: false,
      // oldEquipmentName: "", //原设备名称
      // trainModeId: "",
      // equipmentIdOld: "", // 原设备id

      warndata: [],
      // 点击后样式
      clickStyle(e) {
        this.$refs.btns.childNodes.forEach((item) => {
          item.style.boxShadow = "none";
        });
        this.$refs.btns2.childNodes.forEach((item) => {
          item.style.boxShadow = "none";
        });
        e.target.style.boxShadow = "0 0 20px #555";
      },
      //呼叫&上电 请求
      callTea(callType = 0, equipmentId = this.$store.state.equipmentId) {
        if (this.examStartDisable) {
          this.$axios
            .post(
              "platform/NetSDK/callTeacher",
              Qs.stringify({
                equipmentId,
                callType,
              }),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((res) => {
              if (res.data.result_code == 200) {
                let _that = this;
                switch (callType) {
                  case 1:
                    this.hjdisabled = true;
                    this.warndata = [2, "呼叫老师成功", 2000];
                    setTimeout(() => {
                      _that.hjdisabled = false;
                    }, 8000);
                    break;
                  case 2:
                    this.warndata = [2, "申请上电成功", 2000];
                    this.sqdisabled = true;

                    setTimeout(() => {
                      _that.sqdisabled = false;
                    }, 8000);
                    break;
                }
              }
            })
            .catch((err) => {
              this.$message.error(`网络错误  ${err}`);
            });
        } else {
          this.warndata = [1, "请您先开始考试", 2000];
        }
      },
    };
  },
  computed: {
    examStartDisable: {
      get() {
        return this.$store.state.ksksDisable;
      },
    },
    // rid: {
    //   get() {
    //     return this.$store.state.equipmentId;
    //   },
    //   set() {},
    // },
  },
  watch: {
    examStartDisable(newval) {
      console.log(newval);
    },
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#f3ffff";
    // setInterval(()=>{
    //   this.$axios.get("platform/").then().catch((error)=>{
    //     console.log(error.response);
    //   })
    // },1000*60*5)
  },
  methods: {
    // 图片保存完成
    changePhoto(val) {
      this.isphoto = val;
    },

    // 考试须知
    ksxz(e) {
      this.clickStyle(e);
      this.$router.push({
        name: "Xzhi",
        query: { status: 1 },
      });
    },
    // 开始考试
    examStart(e) {
      this.clickStyle(e);
      this.$refs.count.countDown();
    },
    // 呼叫老师
    callTeacher(e) {
      this.clickStyle(e);
      this.callTea(1);
    },
    //上电申请
    apply(e) {
      this.clickStyle(e);
      this.callTea(2);
    },
    // 定义结束考试/培训
    endExam() {
      this.disableEnd = true;
      this.hjdisabled = true;
      this.sqdisabled = true;
      this.$axios
        .get(
          "platform/NetSDK/stopDetection?equipmentId=" +
            this.$store.state.equipmentId
        )
        .then((res) => {
          console.log(res);
          if (res.data.result_code == 200) {
            clearInterval(this.$refs.count.seced);
            clearInterval(this.$refs.count.clearStartTime);
            this.$store.commit("setKsksDisable", false);
            this.$store.commit("setStudentName", "");
            this.$store.commit("setStudentId", "");
            localStorage.setItem("millis", 0);
            this.warndata = [
              2,
              `${this.$store.state.examType == 1 ? "考试结束" : "培训结束"}`,
              3500,
            ];
            this.disableEnd = false;
            (this.hjdisabled = false),
              (this.sqdisabled = false),
              this.$store.state.examType == 1
                ? (() => {
                    this.$router.push("/");
                  })()
                : this.$router.push("/verify");
          } else {
            this.disableEnd = false;
            (this.hjdisabled = false),
              (this.sqdisabled = false),
              (this.warndata = [1, "操作失败", 3500]);
          }
        })
        .catch((err) => {
          this.disableEnd = false;
          (this.hjdisabled = false),
            (this.sqdisabled = false),
            // this.$message.error("网络错误 " + err);
            (this.warndata = [1, "网络错误" + err, 5500]);
        });
    },
    // 结束考试
    EndTest(e) {
      this.clickStyle(e);
      if (this.examStartDisable) {
        this.$confirm("此操作将结束您的考试, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.endExam();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.warndata = [1, "您还没有开始考试或您的考试已结束", 3500];
      }
    },
    // 开始拍照
    ipinfo(e) {
      this.clickStyle(e);
      if (this.examStartDisable) {
        this.$confirm("拍照后将结束您的考试, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.isphoto = true;
        });
      } else {
        this.warndata = [1, "请您先开始考试", 2000];
      }
    },
  },
};
</script>
